﻿@model PostViewModel
@{
    ViewData["Title"] = Model.Title;
}

@section head {
    <link rel="stylesheet" href="~/lib/github-markdown-css/github-markdown-light.css">
    <link rel="stylesheet" href="~/lib/highlight/styles/tokyo-night-dark.min.css">
    <link rel="stylesheet" href="~/css/post.css">
    @* <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> *@
    <link rel="stylesheet" href="~/lib/element-ui/lib/theme-chalk/index.css">
}

@await Html.PartialAsync("Widgets/BackToTop", new BackToTopViewModel {IsShowText = false})

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div id="sidebar" class="p-3 sticky-lg-top">
                @* <h5>Table of Contents</h5> *@
                <div class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
                    <span class="bi me-2">
                        <i class="fa-solid fa-table-list fa-2xl"></i>
                    </span>
                    <span class="fs-5 fw-semibold">文章目录</span>
                </div>

                <div id="post-toc-container"></div>
            </div>
        </div>
        <div class="col-lg-9">
            <partial name="Widgets/PostHeader" model="Model"/>

            <div class="post-content">
                @Html.Raw(Model.ContentHtml)
            </div>

            <partial name="Widgets/PostBottom"/>

            <partial name="Widgets/Comment" model="Model"/>
        </div>
    </div>
</div>

@section bottom {
    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/axios/dist/axios.js"></script>
        <script src="~/js/blog-post.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/axios/dist/axios.min.js"></script>
        <script src="~/js/blog-post.min.js"></script>
    </environment>
    <script src="~/lib/bootstrap5-treeview/dist/bootstrap-treeview.min.js"></script>
    <script>
        const nodes = '@Html.Raw(Model.TocNodesJson)'
        console.log('nodes', JSON.parse(nodes))
        initTreeView(nodes);
    </script>
    <script src="~/lib/highlight/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
    <script src="~/lib/element-ui/lib/index.js"></script>
    <script src="~/lib/dayjs/dayjs.min.js"></script>
    <environment include="Development">
        <script src="~/js/comment.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="~/js/comment.min.js"></script>
    </environment>
}